@ANDROID5_PROGRESSBAR_HEIGHT: 4px;

.dx-progressbar-container {
    height: @ANDROID5_PROGRESSBAR_HEIGHT;
    background-color: @ANDROID5_PROGRESSBAR_CONTAINER_COLOR;
}

.dx-progressbar-range {
    position: relative;
    background-color: @ANDROID5_PROGRESSBAR_RANGE_COLOR;
}

.dx-progressbar-animating-container {
    position: relative;
    height: @ANDROID5_PROGRESSBAR_HEIGHT;
    background-color: @ANDROID5_PROGRESSBAR_CONTAINER_COLOR;
    overflow: hidden;
}

.dx-progressbar-animating-segment {
    position: absolute;
    bottom: 0px;
    left: -10px;
    display: inline-block;
    width: 15%;
    height: @ANDROID5_PROGRESSBAR_HEIGHT;
    background-color: @ANDROID5_PROGRESSBAR_RANGE_COLOR;
    opacity: 1;
    .animation(loader 1.5s infinite);
    .animation-timing(cubic-bezier(.30, 1, .15, .80));
    .animation-fill-mode();
}

.dx-progressbar-animating-segment-1 {
    opacity: 0;
    .animation-delay(0.75s);
}

.dx-progressbar-animating-segment-2 {
    .animation-delay(0);
}

.dx-state-disabled {
    .dx-progressbar-container, .dx-progressbar-animating-container {
        background-color: fade(@ANDROID5_PROGRESSBAR_DISABLED_STATE_RANGE_COLOR, 26%);
    }

    .dx-progressbar-range {
        background-color: @ANDROID5_PROGRESSBAR_DISABLED_STATE_RANGE_COLOR;
    }

    .dx-progressbar-animating-segment {
        display: none;
    }
}

.dx-rtl .dx-progressbar,
.dx-rtl.dx-progressbar {
    .dx-progressbar-animating-segment {
        left: auto;
        right: -10px;
        .animation-name(loader-rtl);
        .animation-duration(1.5s);
        .animation-iteration-count(infinite);
        .animation-timing(cubic-bezier(.30, 1, .15, .80));
        .animation-fill-mode();
    }

    .dx-progressbar-animating-segment-1 {
        opacity: 0;
        .animation-delay(0.75s);
    }

    .dx-progressbar-animating-segment-2 {
        .animation-delay(0);
    }
}

@-webkit-keyframes loader {
    0% {
        left: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        left: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@-moz-keyframes loader {
    0% {
        left: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        left: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@keyframes loader {
    0% {
        left: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        left: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@-ms-keyframes loader {
    0% {
        left: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        left: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@-webkit-keyframes loader-rtl {
    0% {
        right: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        right: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@-moz-keyframes loader-rtl {
    0% {
        right: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        right: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@keyframes loader-rtl {
    0% {
        right: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        right: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}

@-ms-keyframes loader-rtl {
    0% {
        right: -15%;
        .scale(1);
        opacity: 1;
    }

    15% {
        .scale(1);
        opacity: 1;
    }

    100% {
        right: 105%;
        .scale(~"0.1, 1");
        opacity: 0.1;
    }
}
